<template>
    <div class="commentContainer">
        <!-- rate -->
        <div class="rateBox">
            <div class="rateLeft">
                <div class="total">
                    <p>4.7</p>
                </div>
                <div class="shopRate">
                    <span class="shopRateT">商家评分</span>
                    <el-rate v-model="roteValue" disabled show-score text-color="#ff9900" score-template="{value}"> </el-rate>
                </div>
            </div>
            <div class="rateRight">
                <div class="rateRl rateInfo">
                    <div>
                        <span>味道</span>
                        <p>4.6</p>
                    </div>
                    <div>
                        <span>包装</span>
                        <p>4.7</p>
                    </div>
                </div>
                <div class="rateRr rateInfo">
                    <span>配送</span>
                    <p>4.8</p>
                </div>
            </div>
        </div>
        <div class="comment">
            <!-- tab-title -->
            <ul class="tab-title">
                <li class="tab-item" v-for="item in tabTitle" :key="item.id" :class="[{current: item.id == current}, {nogood: item.id == 3}]" @click="checked(item.id)">{{item.name}} {{item.num}}</li>
            </ul>
            <p class="justLook">
                <label class="mint-checklist-label">
                    <span class="mint-checkbox">
                        <input type="checkbox" class="mint-checkbox-input" checked> 
                        <span class="mint-checkbox-core"></span>
                    </span>
                </label>
                只看有内容的评论</p>
            <!-- tab-container -->
            <mt-tab-container v-model="active" swipeable>
                <!-- tab-container1 -->
                <mt-tab-container-item id="tab-container1">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>
                <!-- tab-container2 -->
                <mt-tab-container-item id="tab-container2">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>
                <!-- tab-container3 -->
                <mt-tab-container-item id="tab-container3">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>                
                <!-- tab-container4 -->
                <mt-tab-container-item id="tab-container4">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>
                <!-- tab-container5 -->
                <mt-tab-container-item id="tab-container5">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>
                <!-- tab-container5 -->
                <mt-tab-container-item id="tab-container6">
                    <soncomt :msg="msg" ref="soncomt"></soncomt>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
import soncomt from './soncomt'
export default {
    data() {
        return {
            roteValue: 4.7,
            active: "tab-container1",
            tabTitle: [{
                id: 0,
                name: '全部',
                num: '839'
            }, {
                id: 1,
                name: '最新',
                num: ''
            }, {
                id: 2,
                name: '好评',
                num: '784'
            }, {
                id: 3,
                name: '差评',
                num: '21'
            }, {
                id: 4,
                name: '有图',
                num: '18'
            }, {
                id: 5,
                name: '味道好',
                num: '41'
            }],
            current: 0,
            msg: 1
        }
    },
    methods: {
        checked(i) {
            this.current = i;
            this.active = 'tab-container' + (i + 1);
            this.msg = i + 1
        }
    },
    components: {
        soncomt
    }
}
</script>

<style>
    .commentContainer .el-rate__icon {
        font-size: 12px;
        margin-right: 0;
    }
    .commentContainer .el-rate__text {
        display: none;
    }
</style>


<style scoped>
    .commentContainer {
        background: #f5f5f5;
        overflow-y: auto;
    }
    /* rate */
    .rateBox {
        display: flex;
        margin-bottom: 8px;
        padding: 20px 0 20px 24px;
        background: #fff;
    }
    .rateLeft {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 126px;
        color: #666;
    }
    .total {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .total p {
        font-size: 38px;
        color: #ff6600;
    }
    .shopRate {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .shopRateT {
        /* margin-bottom: 5px; */
        font-size: 12px;
    }
    .rateRight {
        display: flex;
        flex: 1;
        justify-content: space-between;
        align-items: center;
        color: #666;
    }
    .rateInfo {
        display: flex;
        align-items: center;
    }
    .rateInfo {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 27px;
    }
    .rateRl {
        flex: 1;
    }
    .rateInfo div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .rateInfo span {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .rateInfo p {
        margin: 0;
        font-size: 20px;
        color: #666;
    }
    .rateRr {
        flex-direction: column;
        justify-content: center;
        width: 85px;
        border-left: 1px solid #ddd;
    }
    /* comment */
    .comment {
        padding: 10px 12px 0 12px;
        font-size: 13px;
        background: #fff;
    }
    /* tab-title */
    .tab-title {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .tab-item {
        display: inline-block;
        padding: 0 9px;
        height: 28px;
        line-height: 28px;
        margin: 3px;
        font-size: 12px;
        border-radius: 2px;
        color: #6d7885;
        background-color: #ebf5ff;
    }
    .current {
        color: #fff;
        background-color: #0097ff;
    }
    .nogood {  
        color: #aaa;
        background-color: #f5f5f5;
    }
    .justLook {
        display: flex;
        align-items: center;
        margin: 0;
        padding-left: 15px;
        height: 40px;
        color: #666;
        border-bottom: 1px solid #eee;
    }
    .justLook .mint-checklist-label {
        transform: scale(0.7);
    }

</style>